<template>
	<view class="detail">
		<u-navbar bgColor="rgba(0,0,0,0)">
			<view slot="left" class="align-center">
				<view class="flex-center1" style="border-radius: 50%; width: 72rpx; height: 72rpx; background: rgba(0, 0, 0, 0.4)">
					<image @click="$tools.back()" src="@/static/login/back4.png" style="width: 36rpx; height: 36rpx"></image>
				</view>
			</view>
		</u-navbar>
		<u-swiper :list="list1" height="500" @change="(e) => (currentNum = e.current)" :autoplay="false" indicatorStyle="right: 20px">
			<view slot="indicator" class="indicator-num flex-center1">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list1.length }}</text>
			</view>
		</u-swiper>
		<view style="padding: 32rpx; background-color: #fff">
			<view class="flex-between1" style="margin-bottom: 24rpx">
				<text style="font-size: 40rpx; color: #333333">{{ obj.name }}</text>
				<view class="align-center">
					<u-icon name="share" size="46" color="#333333"></u-icon>
				</view>
			</view>
			<view style="width: 686rpx; height: 1rpx; background: #eeeeee; margin-bottom: 40rpx"></view>
			<view class="align-center" style="margin-bottom: 22rpx">
				<view class="align-center">
					<view style="width: 120rpx">
						<view style="font-weight: 300; font-size: 20rpx; color: #999999">还能入住</view>
						<view style="font-weight: 600; font-size: 32rpx; color: #1365f9">{{ obj.surplusCount }}人</view>
					</view>
					<view style="width: 2rpx; height: 64rpx; background: #eeeeee; margin-left: 40rpx"></view>
				</view>
				<view class="align-center" style="margin-left: 40rpx">
					<view class="">
						<view style="font-weight: 300; font-size: 20rpx; color: #999999">地点</view>
						<view class="ellipsis" style="font-weight: 600; font-size: 32rpx; color: #333333">{{ obj.address }}…</view>
					</view>
					<view style="width: 2rpx; height: 64rpx; background: #eeeeee; margin-left: 40rpx"></view>
				</view>
			</view>
			<!-- <view style="font-weight: 400; font-size: 24rpx; color: #666666">1天前172****7636入住了此基地</view> -->
		</view>
		<view style="padding: 40rpx 32rpx 0">
			<view class="flex" v-for="(item, index) in obj.rooms" :key="index" style="background: #ffffff; padding: 34rpx 40rpx; margin-bottom: 20rpx">
				<image :src="item.image" style="width: 192rpx; height: 192rpx; border-radius: 8rpx; margin-right: 40rpx"></image>
				<view class="flex-column flex-between" style="flex: 1">
					<view class="flex-between1">
						<view style="font-weight: 600; font-size: 32rpx; color: #333333">{{ item.name }}</view>
						<u-icon
							v-if="!item.collectionStatus"
							@click="
								collect(item.id, 2);
								item.collectionStatus = !item.collectionStatus;
							"
							name="heart"
							size="46"
							color="#333333"
						></u-icon>
						<u-icon
							v-else
							@click="
								collect(item.id, 2);
								item.collectionStatus = !item.collectionStatus;
							"
							name="heart-fill"
							size="46"
							color="red"
						></u-icon>
					</view>
					<view style="font-weight: 300; font-size: 24rpx; color: #999999">{{ item.num / 2 }}个上下铺 | {{ item.useNum }}人入住 | {{ item.size }}m²</view>
					<view
						@click="$tools.navigite('./apply', JSON.stringify(item))"
						v-if="item.status == 0"
						class="flex-center1"
						style="width: 192rpx; height: 64rpx; background: #1365f9; border-radius: 32rpx; font-size: 28rpx; color: #ffffff"
					>
						报名入住
					</view>
					<view v-else class="flex-center1" style="width: 192rpx; height: 64rpx; background: #999999; border-radius: 32rpx; font-size: 28rpx; color: #ffffff">
						已住满
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 0 32rpx 0">
			<view style="background: #ffffff; padding: 32rpx 40rpx; margin-bottom: 20rpx">
				<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 26rpx">设施</view>
				<view>
					<view class="flex" style="margin-bottom: 60rpx">
						<view class="flex-column flex-center" style="width: 120rpx">
							<image src="@/static/putup/zs1.png" style="width: 40rpx; height: 44rpx"></image>
							<view style="font-weight: 600; font-size: 24rpx; color: #333333">卧室</view>
							<view style="font-weight: 600; font-size: 24rpx; color: #333333">设施</view>
						</view>
						<view class="flex-wrap" style="flex: 1">
							<view class="align-center" v-for="(item, index) in list2" :key="index" style="width: 33%; margin-bottom: 28rpx">
								<u-icon v-if="item.type" name="checkmark"></u-icon>
								<u-icon v-else name="close"></u-icon>
								<text style="font-weight: 400; font-size: 28rpx; color: #333333">{{ item.name }}</text>
							</view>
						</view>
					</view>
					<view class="flex">
						<view class="flex-column flex-center" style="width: 120rpx">
							<image src="@/static/putup/zs1.png" style="width: 40rpx; height: 44rpx"></image>
							<view style="font-weight: 600; font-size: 24rpx; color: #333333">公众</view>
							<view style="font-weight: 600; font-size: 24rpx; color: #333333">设施</view>
						</view>
						<view class="flex-wrap" style="flex: 1">
							<view class="align-center" v-for="(item, index) in list3" :key="index" style="width: 33%; margin-bottom: 28rpx">
								<u-icon v-if="item.type" name="checkmark"></u-icon>
								<u-icon v-else name="close"></u-icon>
								<text style="font-weight: 400; font-size: 28rpx; color: #333333">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 0 32rpx 50rpx">
			<view style="background: #ffffff; padding: 32rpx 40rpx; margin-bottom: 20rpx">
				<view style="margin-bottom: 20rpx">
					<image src="@/static/putup/zs3.png" style="margin-right: 14rpx; width: 40rpx; height: 40rpx"></image>
					<text style="font-size: 32rpx; color: #333333">订房必读</text>
				</view>
				<view class="align-center" style="margin-bottom: 8rpx">
					<view style="width: 10rpx; height: 10rpx; background: #333333; border-radius: 50%; margin-right: 20rpx"></view>
					<view style="font-weight: 600; font-size: 28rpx; color: #333333">入住方式</view>
				</view>
				<view style="font-weight: 400; font-size: 28rpx; color: #999999">预定人姓名需要与入住人姓名保持一致</view>
			</view>
		</view>
		<view class="flex-center1">
			<view class="flex-center1" @click="$tools.playphone(obj.phone)" style="width: 640rpx; height: 96rpx; background: #1365f9; border-radius: 16rpx">
				<u-icon name="phone-fill" color="#fff" size="45"></u-icon>
				<text style="font-size: 36rpx; color: #ffffff; margin-left: 8rpx">电话联系</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentNum: 0,
			list1: ['https://cdn.uviewui.com/uview/swiper/swiper1.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper3.png'],
			obj: {},
			list2: [
				{
					name: '电视',
					type: false
				},
				{
					name: '空调',
					type: false
				},
				{
					name: '衣柜',
					type: false
				},
				{
					name: '床',
					type: false
				},
				{
					name: '卫生间',
					type: false
				},
				{
					name: '智能门锁',
					type: false
				},
				{
					name: '阳台',
					type: false
				},
				{
					name: '暖气',
					type: false
				}
			],
			list3: [
				{
					name: '冰箱',
					type: false
				},
				{
					name: '洗衣机',
					type: false
				},
				{
					name: '热水器',
					type: false
				},
				{
					name: '宽带',
					type: false
				},
				{
					name: '沙发',
					type: false
				},
				{
					name: '油烟机',
					type: false
				},
				{
					name: '燃气灶',
					type: false
				},
				{
					name: '可做饭',
					type: false
				},
				{
					name: '电磁炉',
					type: false
				},
				{
					name: '微波炉',
					type: false
				},
				{
					name: '橱柜',
					type: false
				}
			]
		};
	},

	onLoad(option) {
		this.id = option.value;
		this.init();
	},
	methods: {
		async init() {
			await this.getdetail();
			uni.$u.mpShare = {
				title: this.obj.name, // 默认为小程序名称，可自定义
				path: '', // 默认为当前页面路径，一般无需修改，QQ小程序不支持
				// 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。
				// 支持PNG及JPG，默认为当前页面的截图
				imageUrl: this.list1[0]
			};
		},
		getdetail() {
			this.$request('front/home/homeDetail').then((res) => {
				console.log(res.obj, '详情');
				res.obj.bedroom = res.obj.bedroom.split(',');
				res.obj.publicInfo = res.obj.publicInfo.split(',');
				res.obj.bedroom.map((item) => {
					this.list2[item].type = true;
				});
				res.obj.publicInfo.map((item) => {
					this.list3[item].type = true;
				});
				this.obj = res.obj;
				this.list1 = res.obj.image.split(',');
			});
			// this.$request('front/userHome/getDetail', {
			// 	id: this.id
			// }).then((res) => {
			// 	console.log(res.obj, '详情');
			// 	res.obj.bedroom = res.obj.bedroom.split(',');
			// 	res.obj.publicInfo = res.obj.publicInfo.split(',');
			// 	res.obj.bedroom.map((item) => {
			// 		this.list2[item].type = true;
			// 	});
			// 	res.obj.publicInfo.map((item) => {
			// 		this.list3[item].type = true;
			// 	});
			// 	this.obj = res.obj;
			// 	this.list1 = res.obj.image.split(',');
			// });
		}
	}
};
</script>

<style lang="less" scoped>
.detail {
	padding-bottom: 180rpx;
	background-color: #f5f6fa;
	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;

		&__text {
			color: #ffffff;
			font-size: 12px;
		}
	}
	.ellipsis {
		white-space: nowrap; /* 确保文本在一行内显示 */
		overflow: hidden; /* 隐藏溢出的内容 */
		text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
	}
}
</style>
